<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>

	<style type="text/css">

	/*class是可以重复的 是一类元素的统称*/
	/*语法 .属性名 也是一个整体*/


	

	.fz20{
		font-size: 20px;
	}



	.pragra {
		color: gold;
		font-size: 30px;
	}

	#p1{

		font-size: 80px;

	}

	
	/*层叠体现出来的是将多个样式叠加在一起，每个样式是不一样的时候进行叠加*/
	/*另外一种情况，类名之间的样式出现了重名，也就是所谓的冲突，出现冲突后，该如何处理？*/

	/* 后面的会将前面的覆盖掉*/

	/* css 里面的三大特性里面的第三大特性  优先级 。 就是在css出现冲突的时候，会根据优先级选择合适的样式属性。*/

	/* 1. 继承  2. 层叠 3. 优先级（权重）*/
	/* css 的选择器是有权重 优先级  id 权重 > 类选择器 > 标签选择器 */



	</style>

</head>
<body>
	
	<p id="p1" class="pragra fz20">Lorem ipsum dolor sit amet consectetur.</p>
</body>
</html>